/* mixins */
@import "src/mixins.scss";

// @include DEBUG();
@include useFontSmoothingOnMacOS();
/* wrapper 公共背景 */
.wrapper-bg {
  /* ... */
  // background-position: 0 1.7rem;
  // background-repeat: repeat-y;
  // background-size: 100%;
}

.container {
  width: 100%;
  box-sizing: border-box;
  @include flex_dis();
  @include flex(flex-direction, column);
  @include flex(align-items, center);
  position: relative;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0.3rem,
    #131428 0.3rem
  ); /* 避免超出底图背景 */

  .container-wrapper {
    width: 100%;
    box-sizing: border-box;
  }
  /* header */
  .container-header {
    height: 1.7rem;
    background-position: 0 0;
    background-size: 100% auto;
    overflow: hidden;
    padding-top: 0.62rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.34rem;
  }
  .container-header + div {
    /* 沉底 自适应上移 */
    // margin-top: -0.38rem;
  }
  /* notice */
  .container-notice {
    width: 6.58rem;
    height: 0.54rem;
    background: #2b2d53;
    border-radius: 0.16rem;
    margin: 0 auto;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #feeebd;
    @include flex_dis();
    @include flex(justify-content, center);
    @include flex(align-items, center);
    margin-bottom: 0.14rem;
    font-size: 0.24rem;
    img {
      width: 0.32rem;
      height: 0.32rem;
      margin-right: 0.06rem;
    }
    .minutes {
      margin-left: 0.1rem;
      color: #3dfffe;
    }
  }
  /* main */
  .container-main {
    /* task list */
    padding: 0 0.2rem;
    margin-top: -1.2rem;
    background-repeat: repeat-y;
    background-size: 100%;
    .container-main__list {
      @include flex_dis();
      @include flex(justify-content, space-between);
      @include flex(align-items, center);
      margin-bottom: 0.12rem;

      .list-item {
        @include flex_dis();
        @include flex(flex-direction, column);
        @include flex(align-items, center);
        .list-item--content {
          background-size: 100% 100%;
          @include flex_dis();
          > section {
            background-size: 100% 100%;
          }
        }
        .list-item--condition {
          width: 1.6rem;
          height: 0.4rem;
          font-size: 0.2rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #d0d2f9;
          line-height: 0.28rem;
          text-align: center;
          line-height: 0.4rem;
          background-size: 100% 100%;
          margin: 0 auto;
        }
        .list-item--main {
          width: 1.76rem;
          height: 2.28rem;
          background-size: 100% 100%;
          box-sizing: border-box;
          position: relative;
          padding: 0.14rem 0.1rem 0.26rem;
          margin-top: -0.08rem;
          @include flex_dis();
          @include flex(flex-direction, column);
          @include flex(justify-content, space-between);
          @include flex(align-items, center);
          position: relative;

          .list-item__pic {
            width: 1.54rem;
            height: 1.5rem;
          }
          .list-item__name {
            font-size: 0.24rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #feeebd;
            line-height: 0.34rem;
          }
          /* GOT 已获取标识 */
          .list-item__got {
            width: 0.46rem;
            height: 0.46rem;
            position: absolute;
            bottom: 0.5rem;
            right: -0.03rem;
          }
          /* TAG 1/5天 */
          .list-item__tag {
            width: 0.74rem;
            height: 0.36rem;
            background-size: 100% 100%;
            text-align: center;
            font-size: 0.24rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 0.36rem;
            position: absolute;
            right: 0.22rem;
            bottom: 0.68rem;
          }
        }
      }
    }
  }

  /* submit */
  .container-submit {
    width: 6.18rem;
    height: 0.96rem;
    margin: 0.3rem auto 0.12rem;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  /* tips */
  .container-tips {
    .container-tips__text {
      width: 6.54rem;
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d0d2f9;
      line-height: 0.34rem;
      margin: 0.34rem auto 0.14rem;
    }
    .container-tips__qr {
      width: 2.72rem;
      height: 2.72rem;
      display: block;
      margin: 0 auto;
    }
  }

  /* footer */
  .container-footer {
    width: 100%;
    height: 1.62rem;
    background-size: 100%;
    background-position: bottom;
    text-align: center;
    font-size: 0.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7e7e86;
    line-height: 0.28rem;
    padding-top: 0.22rem;
    box-sizing: border-box;
    margin-top: -1.02rem;
  }
}
